<!doctype html>
<html>
<head>
  <script src="./js/config.js"></script>
  <meta charset="utf-8">
  <title>License 到期大屏</title>
  <meta http-equiv="refresh" content="30">
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    html,body{height:100%;font-family:"Helvetica Neue",sans-serif;background:#0e0e0e;color:#fff;overflow:hidden}
    .back-btn{position:fixed;top:15px;left:15px;z-index:999;background:#27ae60;color:#fff;border:none;padding:8px 14px;border-radius:4px;cursor:pointer;font-size:16px}
    .header{position:fixed;top:0;left:0;right:0;height:60px;line-height:60px;text-align:center;font-size:32px;font-weight:bold;background:#111}
    .wrap{display:flex;height:100%;padding:70px 1rem 1rem 1rem;gap:1rem}
    .card{flex:1;display:flex;flex-direction:column;border-radius:8px;padding:1.5rem}
    .red{background:#c72c2c}.orange{background:#e67e22}.green{background:#27ae60}
    .card-title{font-size:2.2vw;font-weight:bold;margin-bottom:1rem;text-align:center}
    .card-list{flex:1;overflow-y:auto;font-size:1.6vw;line-height:1.8}
    .row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.15)}
    .row:last-child{border:none}
    .ts{position:fixed;bottom:10px;right:15px;font-size:.9vw;color:#aaa}
  </style>
</head>
<body>
<button class="back-btn" onclick="location.href='index.html'">← 返回主页</button>
<div class="header">License 到期看板</div>
<div class="wrap">
  <div class="card red">
    <div class="card-title">❌ 已过期</div>
    <div class="card-list" id="expired"></div>
  </div>
  <div class="card orange">
    <div class="card-title">⏰ 即将过期（3 天内）</div>
    <div class="card-list" id="will"></div>
  </div>
  <div class="card green">
    <div class="card-title">✅ 正常</div>
    <div class="card-list" id="normal"></div>
  </div>
</div>
<div class="ts">数据更新于：<span id="ts"></span> &nbsp;|&nbsp; 每 30 秒自动刷新</div>

<script>

function renderList(el, list){
  el.innerHTML = '';
  list.forEach(r=>{
    const div = document.createElement('div');
    div.className = 'row';
    div.innerHTML = `<span>${r.customer}</span><span>${r.expiry}</span>`;
    el.appendChild(div);
  });
}

async function loadBoard(){
  const data = await fetch(BASE+'/api/list').then(r=>r.json());
  const expired = data.filter(r=>r.status.includes('已过期'));
  const will    = data.filter(r=>r.status.includes('即将过期'));
  const normal  = data.filter(r=>!r.status);
  renderList(document.getElementById('expired'), expired);
  renderList(document.getElementById('will'), will);
  renderList(document.getElementById('normal'), normal);
  document.getElementById('ts').textContent = new Date().toLocaleString('zh-CN');
}

loadBoard();
setInterval(loadBoard, 30000);
</script>
</body>
</html>
